<template>
	<view class="vk-data-mobile-preview">
		<!-- iphone7 -->
		<view class="iphone7" v-if="type === 'iphone'">
			<view class="iphone7-left"></view>
			<view class="iphone7-center">
				<view class="iphone7-top"></view>
				<view class="iphone7-main">
					<view class="iphone7-container">
						<iframe class="iframe" :src="url" v-if="url"></iframe>
					</view>
				</view>
				<view class="iphone7-bottom" style="overflow: hidden;">
					<view
						data-dismiss="modal"
						aria-hidden="true"
						title="点击关闭"
						style="height: 52px; width: 52px; border-radius: 52px; margin: 20px 0px 0px 159px; cursor: pointer;"
					></view>
				</view>
			</view>
			<view class="iphone7-right"></view>
		</view>

		<!-- iphonex -->
		<view class="iphonex" v-else-if="type === 'iphonex'">
			<view class="iphonex-bg1">
				<view class="iphonex-bg2">
					<view class="iphonex-bg3">
						<view class="iphonex-lh">
							<view class="iphonex-lh-con">
								<view class="lh-tiao"></view>
								<view class="lh-yuan"></view>
							</view>
						</view>
						<span class="date-time">{{ dateTime }}</span>
						<view class="states">
							<img
								src=""
							/>
							<img
								src=""
								style="margin: 0 5px;"
							/>
							<img
								src=""
							/>
						</view>
						<view class="iphonex-container"><iframe class="iframe" :src="url" v-if="url"></iframe></view>
						<view class="iphonex-home"></view>
					</view>
				</view>
			</view>
			<view class="jingyin"></view>
			<view class="yl-jia"></view>
			<view class="yl-jian"></view>
			<view class="suoping"></view>
		</view>

		<!-- qrcode -->
		<view class="qrcode" v-else-if="type === 'qrcode'">
			<view class="qrcode-image"><vk-data-qrcode :text="url" :size="260" unit="px"></vk-data-qrcode></view>
			<view class="qrcode-tips">扫一扫上面的二维码图案，预览商品</view>
		</view>
	</view>
</template>

<script>
export default {
	name: "vk-data-mobile-preview",
	props: {
		type: {
			type: String,
			default: "iphone"
		},
		url: {
			type: String,
			default: ""
		}
	},
	data() {
		return {
			dateTime: ""
		};
	},
	mounted() {
		this.timer = setInterval(() => {
			this.dateTime = vk.pubfn.timeFormat(new Date(), "hh:mm");
		}, 1000);
	},
	beforeDestroy() {
		if (this.timer) clearInterval(this.timer);
	},
	methods: {},
	watch: {},
	computed: {}
};
</script>
<style lang="scss" scoped>
.vk-data-mobile-preview {
	box-sizing: border-box;
	.iphone7 {
		min-height: 775px;
		width: 383px;
		margin: 0 auto;
		.iphone7-left {
			height: 293px;
			width: 5px;
			background: url()
				0 88px no-repeat;
			float: left;
		}
		.iphone7-center {
			height: auto;
			width: 372px;
			float: left;
		}
		.iphone7-top {
			height: 83px;
			width: 372px;
			background: url()
				0 0 no-repeat;
		}
		.iphone7-main {
			position: relative;
			min-height: 600px;
			width: 372px;
			background: url()
				0 0 repeat-y;
			padding: 0 15px;
		}

		.iphone7-left {
			height: 293px;
			width: 5px;
			background: url()
				0 88px no-repeat;
			float: left;
		}
		.iphone7-center {
			height: auto;
			width: 372px;
			float: left;
		}
		.iphone7-top {
			height: 83px;
			width: 372px;
			background: url()
				0 0 no-repeat;
		}
		.iphone7-main {
			min-height: 600px;
			width: 372px;
			background: url()
				0 0 repeat-y;
			padding: 0 15px;
			box-sizing: border-box;
		}
		.iphone7-bottom {
			height: 92px;
			width: 372px;
			background: url()
				0 0 no-repeat;
		}
		.iphone7-right {
			height: 220px;
			width: 6px;
			background: url()
				0 158px no-repeat;
			float: left;
		}
		.iphone7-container {
			position: relative;
			width: 100%;
			height: 100%;
			min-height: 600px;
			.iframe {
				border: 0 none;
				width: 100%;
				height: 600px;
				overflow: auto;
				display: block;
			}
		}
	}

	.iphonex {
		margin: 0 auto;
		width: 400px;
		height: 800px;
		background: #68686b;
		border-radius: 30px;
		box-sizing: border-box;
		padding: 2px;
		position: relative;
		.iphonex-bg1 {
			width: 100%;
			height: 100%;
			background: #fff;
			border-radius: 30px;
			box-sizing: border-box;
			padding: 0.5px;
		}
		.iphonex-bg2 {
			width: 100%;
			height: 100%;
			background: #0b0d0c;
			border-radius: 30px;
			box-sizing: border-box;
			padding: 10px;
			box-shadow: inset 14px 0 10px -15px #fff, inset -14px 0 10px -15px #fff;
		}
		.iphonex-bg3 {
			width: 100%;
			height: 100%;
			background: #fff;
			border-radius: 26px;
			box-sizing: border-box;
			position: relative;
			.date-time {
				width: 25%;
				left: 0;
				position: absolute;
				top: 6px;
				z-index: 111;
				font-size: 13px;
				font-weight: 600;
				text-align: center;
			}
		}
		.iphonex-lh {
			width: 50%;
			height: 20px;
			background: #0b0d0c;
			margin: 0 auto;
			border-radius: 0 0 14px 14px;
			position: relative;
		}
		.iphonex-lh:before {
			position: absolute;
			content: "";
			width: 5px;
			height: 5px;
			background: #0b0d0c;
			left: -5px;
			top: 0;
			z-index: 9;
		}
		.iphonex-lh:after {
			position: absolute;
			content: "";
			width: 5px;
			height: 5px;
			background: #0b0d0c;
			right: -5px;
			top: 0;
			z-index: 9;
		}
		.iphonex-lh-con {
			display: flex;
			align-items: center;
			justify-content: center;
		}
		.iphonex-lh-con:before {
			position: absolute;
			content: "";
			width: 10px;
			height: 10px;
			background: #fff;
			border-radius: 100%;
			left: -10px;
			top: 0;
			z-index: 10;
		}
		.iphonex-lh-con:after {
			position: absolute;
			content: "";
			width: 10px;
			height: 10px;
			background: #fff;
			border-radius: 100%;
			right: -10px;
			top: 0;
			z-index: 10;
		}
		.lh-tiao {
			width: 25%;
			height: 3px;
			border-radius: 5em;
			background: #2d2d2d;
			margin-left: 8px;
			margin-top: 4px;
		}
		.lh-yuan {
			width: 5px;
			height: 5px;
			border-radius: 5em;
			background: #212554;
			margin-left: 8px;
			margin-top: 4px;
		}
		.states {
			width: 25%;
			right: 1.5px;
			position: absolute;
			top: 4px;
			z-index: 111;
			display: flex;
			align-items: center;
			justify-content: center;
			img {
				width: 20px;
			}
		}
		.iphonex-container {
			position: absolute;
			top: 24px;
			left: 0;
			right: 0;
			bottom: 24px;
			.iframe {
				border: 0 none;
				width: 100%;
				height: 100%;
				overflow: auto;
				display: block;
			}
		}
		.iphonex-home {
			width: 32%;
			height: 0.5%;
			border-radius: 5em;
			position: absolute;
			bottom: 1%;
			left: 50%;
			margin-left: -16%;
			background: #0b0d0c;
		}
		.jingyin {
			width: 1.5px;
			height: 3.75%;
			background: #121212;
			position: absolute;
			top: 13.5%;
			left: -1.5px;
			border-radius: 5px 0 0 5px;
		}
		.yl-jia {
			width: 1.5px;
			height: 7%;
			background: #121212;
			position: absolute;
			top: 20.75%;
			left: -1.5px;
			border-radius: 5px 0 0 5px;
		}
		.yl-jian {
			width: 1.5px;
			height: 7%;
			background: #121212;
			position: absolute;
			top: 30%;
			left: -1.5px;
			border-radius: 5px 0 0 5px;
		}
		.suoping {
			width: 1.5px;
			height: 11.5%;
			background: #121212;
			position: absolute;
			top: 23%;
			right: -1.5px;
			border-radius: 0 5px 5px 0;
		}
	}
	.iphonex:after {
		position: absolute;
		content: "";
		display: block;
		width: 100%;
		height: 100%;
		background: rgba(0, 0, 0, 0.2);
		top: 10px;
		left: 10px;
		z-index: -1;
		border-radius: 18px;
		filter: blur(8px);
	}
	.qrcode {
		margin: 16px;
		border-radius: 10px;
		padding: 20px;
		background-color: #fff;
		box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
		.qrcode-image {
			display: flex;
			justify-content: center;
			align-items: center;
			margin: 20px 0 30px 0;
		}
		.qrcode-tips {
			text-align: center;
			font-size: 12px;
			color: #ccc;
			line-height: 18px;
		}
	}
}
</style>
